<template>
    <header class="header">
        <h1>todos</h1>
        <input
            class="new-todo"
            placeholder="What needs to be done?"
            autofocus
            v-model="addTodoData"
            @keyup.enter="addTodoPost"
        />
    </header>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { ref } from 'vue';
import { todoRaw, useTodoStore } from '../store/todoStore';
//引入pinia容器实例化
var todoStoreData = useTodoStore();
//v-model双向数据绑定的值
const addTodoData = ref('')
//正则判断为空‘
var reg = /^[\s\S]*.*[^\s][\s\S]*$/;
//回车添加新数据
const addTodoPost = async () => {
    if (new RegExp(reg).test(addTodoData.value) != false) {
        //定义传输的数据类型
        const todoDataType: todoRaw = {
            id: 0,
            title: '',
            status: false
        }
        //设置新数据的id
        var arrTag = todoStoreData.todoList.length - 1;
        todoDataType.id = todoStoreData.todoList.length != 0 ? todoStoreData.todoList[arrTag].id + 1 : 0;
        //设置双向数据绑定的title
        todoDataType.title = addTodoData.value;
        //验证是否是添加
        // console.log(todoDataType)
        //发送axios请求
        const { data, status } = await axios.post('http://localhost:8000/todo', todoDataType)
        //查看数据
        // console.log(data);
        // status=201并且data不为空则是添加成功
        if (data && status == 201) {
            //添加渲染到页面上
            // todoStoreData.todoList.push(todoDataType)--不建议使用
            //在pinia中书写一个添加到页面的方法
            //!调用子啊pinia中书写的方法
            todoStoreData.pushTodoData(data);
            //清空input的内容
            addTodoData.value = ''
        }

    }
}


</script>

<style>
</style>